<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery021</title>

<!-- 
第一节：Jquery 操作DOM 节点
第二节：Jquery 操作DOM 节点属性
第三节：Jquery 操作DOM 节点样式
第四节：设置和获取HTML，文本和值
第五节：遍历节点操作
第六节：Jquery 操作DOM 节点CSS
1，查找节点
2，创建节点append()
3，删除节点remove()
1，查找属性
2，设置属性
3，删除属性
1，获取样式
2，设置样式
3，追加样式
4，移除样式
1，获取html，设置html
2，获取文本，设置文本
3，获取值，设置值
1，获取所有子节点children()
2，获取邻近的下一个兄弟节点next()
3，获取邻近的上一个兄弟节点prev()
1，获取DOM 节点CSS 样式
2，设置DOM 节点CSS 样式

 -->
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		//操作DOM节点
		//1，查找节点
		/* var li = $("ul li:eq(1)");
		var li_txt = li.text();
		alert(li_txt); */
		//2，添加节点
		/* var li = $("<li title='这是马化腾'>马化腾</li>");
		var li1 = $("<li title='这是马化腾1'>马化腾1</li>");
		var li2 = $("ul li:eq(1)");
		//最后追加
		$("ul").append(li);
		//插入
		li1.insertAfter(li2); */
		//3，删除节点
		/* $("ul li:eq(1)").remove(); */
		
		//操作DOM节点属性
		//1，查找DOM节点属性
		/* var li =  $("ul li:eq(1)");
		var li_attr = li.attr("title");
		alert(li_attr); */
		//2，设置DOM节点属性
		/* var li = $("ul li:eq(1)");
		li.attr("title","你懂得"); */
		//3，删除DOM节点属性
		/* var li = $("ul li:eq(1)");
		li.removeAttr("title"); */
		
		//操作DOM节点样式
		//1，获取样式
		/*var li = $("ul li:eq(1)");
		var li_class = li.attr("class");
		alert(li_class); */
		//2，设置样式
		/* $("ul li:eq(1)").attr("class","lc2"); */
		//3，追加样式
		/* $("ul li:eq(1)").addClass("lc3"); */
		//4，移除样式
		/* $("ul li:eq(1)").removeClass("lc") */
		
		//设置和获取HTML，文本和值
		//1，获取html
		/* var li_html = $("ul li:eq(0)").html();
		alert(li_html); */
		//2，设置html
		/* $("ul li:eq(0)").html("<font color=red>哈哈</font>"); */
		//3，获取文本
		/* var li_text = $("ul li:eq(0)").text();
		alert(li_text); */
		//4，设置文本
		/* $("ul li:eq(0)").text("呵呵"); */
		
		//遍历DOM节点操作
		/* var b = $("body").children();
		alert(b.length);
		var u = $("ul").children();
		alert(u.length);
		for(var i = 0;i<u.length;i++){
			//alert(u[i].innerHTML);
			alert($(u[i]).html());
		} */
		
		//获取临近节点
		//1，获取下一个节点
		/* var l = $("ul li:eq(1)").next();
		alert(l.html()); */
		//2，获取上一个节点
		/* var l = $("ul li:eq(1)").prev();
		alert(l.html()); */
		
		//操作DOM节点的CSS样式
		//1,获取DOM节点的CSS样式
		/* var c = $("#jp").css("color");
		alert(c); */
		//2,设置DOM节点的CSS样式
		$("#jp").css("color","blue");
		$("#jp").css("font-size","50px");
		var font = $("#jp").css("font-size");
		alert(font);
	});
	
	function getUserName(){
		var userName = $("#userName").val();
		alert(userName);
	}
	
	function setUserName(){
		$("#userName").val("你懂的");
	}

</script>
<style type="text/css">
	.lc{
		background-color: red;
	}
	
	.lc2{
		background-color: blue;
	}
	
	.lc3{
		font-weight: bold;
	}
</style>
</head>
<body>

<p>你最喜欢的名人是？</p>
<ul>
	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>

<input type="text" id="userName"/>

<input type="button" value="获取值" onClick="getUserName()"/>
<input type="button" value="设置值" onClick="setUserName()"/>


<p id="jp" style="color:red;font-size: 30px">JQuery吊炸天</p>

</body>
</html>